<template>
  <div class="half-playground">
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         width="591px"
         height="323px"
    >
<!--      球场底图-->
      <image x="0" y="0" width="100%" height="100%"
             xlink:href="../../assets/image/playerGround/half_playground.png"
             preserveAspectRatio="xMinYMin meet"/>

<!--      直线的头部箭头-->
      <defs>
        <marker id="arrow" markerWidth="14" markerHeight="14" refX="3" refY="5" orient="auto">
          <path d="M2,2 L2,8 L9,5 L2,2" style="fill: #1A936F;" ></path>
        </marker>
      </defs>

<!--      提前定义菱形-->
      <defs>
        <image id="diamond" x="0" y="0" width="8%" height="8%"
               xlink:href="../../assets/image/shot/diamond.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>
      <!--      提前定义叉叉-->
      <defs>
        <image id="fork" x="0" y="0" width="8%" height="8%"
               xlink:href="../../assets/image/shot/fork.svg"
               preserveAspectRatio="xMinYMin meet"/>
      </defs>


<!--      成功传中的直线-->
      <line v-if="my_successful"
            v-for="item in my_successful"
            :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
            style="stroke:#1A936F;stroke-width:2;"
            marker-end="url(#arrow)" />

<!--      失败传中的红色正方形-->
      <rect v-if="my_unsuccessful"
            v-for="item in my_unsuccessful"
            :x="item.x1" :y="item.y1" width="8" height="8"
            style="fill:#BD1E1E;stroke:#BD1E1E;stroke-width:1;"/>

<!--      灰色的进球-->
      <circle v-if="my_shot_success"
              v-for="item in my_shot_success"
              :cx="item.x1" :cy="item.y1" r="8" stroke="#9E9E9E"
              stroke-width="2" fill="#9E9E9E"/>

<!--      蓝色的射偏-->
      <rect v-if="my_shot_deviation"
            v-for="item in my_shot_deviation"
            :x="item.x1" :y="item.y1" width="17" height="17"
            style="fill:#01538B;stroke:#9E9E9E;stroke-width:1;"/>

<!--      菱形的中柱-->
      <use v-if="my_shot_post"
           v-for="item in my_shot_post"
           :x="item.x1" :y="item.y1" xlink:href="#diamond" />

<!--      叉叉的阻挡-->
      <use v-if="my_shot_resistance"
           v-for="item in my_shot_resistance"
           :x="item.x1" :y="item.y1" xlink:href="#fork" />

    </svg>
  </div>

</template>

<script>
  export default {
    name: "HalfPlayGround",
    props:{
      //组织-传中-成功传中
      successful_cross:{
        type:Array,
        default(){
          return []
        }
      },
      //组织-传中-失败传中
      failed_cross:{
        type:Array,
        default(){
          return []
        }
      },
      //射门-进球
      my_shot_success:{
        type:Array,
        default(){
          return []
        }
      },
      //射门-射偏
      my_shot_deviation:{
        type:Array,
        default(){
          return []
        }
      },
      //射门-中柱
      my_shot_post:{
        type:Array,
        default(){
          return []
        }
      },
      //射门-阻挡
      my_shot_resistance:{
        type:Array,
        default(){
          return []
        }
      },
    },
    data(){
      return {
        players:[
          {number:1,name:'球员1',x1:'10%',y1:'10%'},
          {number:2,name:'球员2',x1:'20%',y1:'20%'},
          {number:3,name:'球员3',x1:'30%',y1:'30%'},
          {number:4,name:'球员4',x1:'40%',y1:'40%'},
          {number:5,name:'球员4',x1:'50%',y1:'50%'},
          {number:6,name:'球员4',x1:'60%',y1:'60%'},
          {number:7,name:'球员4',x1:'70%',y1:'70%'},
        ],
        // Unsuccessful: [
        //   {
        //     "x1": "87.70",
        //     "y1": "18.80",
        //     "x2": "90.20",
        //     "y2": "38.80"
        //   },
        //   {
        //     "x1": "68.30",
        //     "y1": "4.30",
        //     "x2": "91.40",
        //     "y2": "49.70"
        //   },
        //   {
        //     "x1": "98.20",
        //     "y1": "30.60",
        //     "x2": "95.20",
        //     "y2": "49.10"
        //   },
        //   {
        //     "x1": "89.20",
        //     "y1": "72.70",
        //     "x2": "90.90",
        //     "y2": "45.70"
        //   },
        //   {
        //     "x1": "80.10",
        //     "y1": "18.50",
        //     "x2": "82.40",
        //     "y2": "25.60"
        //   },
        //   {
        //     "x1": "88.60",
        //     "y1": "84.20",
        //     "x2": "88.20",
        //     "y2": "80.80"
        //   },
        //   {
        //     "x1": "84.40",
        //     "y1": "95.00",
        //     "x2": "87.70",
        //     "y2": "53.70"
        //   },
        //   {
        //     "x1": "93.40",
        //     "y1": "83.00",
        //     "x2": "94.20",
        //     "y2": "80.00"
        //   },
        //   {
        //     "x1": "89.50",
        //     "y1": "86.00",
        //     "x2": "87.80",
        //     "y2": "36.10"
        //   }
        // ],
        // Successful: [
        //   {
        //     "x1": "96.60",
        //     "y1": "80.90",
        //     "x2": "92.00",
        //     "y2": "46.00"
        //   },
        //   {
        //     "x1": "88.20",
        //     "y1": "82.70",
        //     "x2": "92.30",
        //     "y2": "34.30"
        //   },
        //   {
        //     "x1": "90.40",
        //     "y1": "14.90",
        //     "x2": "87.90",
        //     "y2": "97.20"
        //   }
        // ],
      }
    },
    watch:{
      positionData:{

      }
    },
    computed:{
      //处理 失败传中
      my_unsuccessful(){
        return this.successful_cross.map(item=>{
          return {
            x1 : item.x1 + '%',
            y1 : item.y1 + '%',
            x2 : item.x2 + '%',
            y2 : item.y2 + '%'
          }
        })
      },
      //处理 成功传中
      my_successful(){
        return this.failed_cross.map(item=>{
          return {
            x1 : item.y1 + '%',
            y1 : Math.round((100-item.x1)*2 * 10) / 10 + '%',
            x2 : item.y2 + '%',
            y2 : Math.round((100-item.x2)*2 * 10) / 10 + '%',
          }
        })
      },
    },
    created() {

    },
    mounted() {

    },
    methods:{

    },
  }
</script>

<style scoped>
 .half-playground {
   position: relative;
   width: 591px;
   height: 323px;
   margin-top: 5px;
 }
</style>